<template>
	<div class="address">
		<van-nav-bar title="影院地图"
		             @click-left="onClickLeft"
		             :border='false'>
			<template #right>
				<van-icon name="search"
				          size="18" />
			</template>
			<template #left>
				<van-icon name="arrow-left"
				          size="18" />
			</template>
		</van-nav-bar>
		<div id="container">

		</div>
		<div class="cinemaMap">
			<div v-swiper:mySwiper="swiperOption">
				<div class="swiper-wrapper">
					<div class="swiper-slide"
					     :key="banner"
					     v-for="banner in banners">
						<img :src="banner">
						<div class="detailMsg">
							<div class="msg">
								<p>耀莱成龙影城（建业店）</p>
								<van-icon name="flag-o"
								          size="15" />
								<van-icon name="phone-circle-o"
								          size="15" />
								<span> 45min</span>
							</div>
							<div class="button">查看</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import ban1 from '@/assets/images/cinema/cinemaMap/cinemaViews.png'
import ban2 from '@/assets/images/cinema/cinemaMap/cinemaViews2.png'
import ban3 from '@/assets/images/cinema/cinemaMap/cinemaViews3.png'
import ban4 from '@/assets/images/cinema/cinemaMap/cinemaViews4.png'

export default {
	name: '',
	data() {
		return {
			banners: [ban1, ban2, ban3, ban4],
			swiperOption: {
				slidesPerView: 1.3,
				// spaceBetween: 5,
				centeredSlides: true,
				loop: true
			}
		}
	},

	mounted() {
		var map = new BMap.Map('container')
		
		var point = new BMap.Point(0,0)
		map.centerAndZoom(point, 16)
		var geolocation = new BMap.Geolocation()
		// 开启SDK辅助定位
		// geolocation.enableSDKLocation()
		// geolocation.getCurrentPosition(function(r) {
		// 	if (this.getStatus() == BMAP_STATUS_SUCCESS) {
		// 		var mk = new BMap.Marker(r.point)
		// 		map.addOverlay(mk)
		// 		map.panTo(r.point)
		// 	} else {
		// 		alert('failed' + this.getStatus())
		// 	}
		// })
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
	if(this.getStatus() == BMAP_STATUS_SUCCESS){
		var mk = new BMap.Marker(r.point);
		map.addOverlay(mk);
		map.panTo(r.point);
		alert('您的位置：'+r.point.lng+','+r.point.lat);
	}
	else {
		alert('failed'+this.getStatus());
	}        
});

		map.enableScrollWheelZoom(true)
		var local = new BMap.LocalSearch(map, { renderOptions: { map: map } })
		local.searchInBounds('影城', map.getBounds())

		var opts = { offset: new BMap.Size(10, 400) }
		var opts2 = { offset: new BMap.Size(330, 100) }
		map.addControl(new BMap.NavigationControl(opts))
		//  GeolocationControl
		map.addControl(new BMap.GeolocationControl(opts2))
		//   const swiper = new Swiper('.swiper-container', {
		//   slidesPerView: 3,
		//   spaceBetween: 30,
		// centeredSlides: true,
		// loop: true,
		// })
		// console.log('Current Swiper instance object', this.mySwiper)
		this.mySwiper.slideTo(3, 1000, false)
	},
	methods: {
		onClickLeft() {
			this.$router.back()
		},
		onClickRight() {
			this.$router.push('search')
		}
	}
}
</script>

<style lang='scss'>
.van-nav-bar {
	height: 56px;
	padding-top: 30px;
	border: none;
	background-color: inherit;
	.van-nav-bar__title {
		font-size: 44px;
		color: #ffffff;
		vertical-align: bottom;
	}
	.van-icon-arrow-left::before {
		color: #ffffff;
		vertical-align: bottom;
		margin-top: 25px;
		padding-left: 25px;
	}
	.van-icon-search {
		color: #ffffff;
		margin-top: 25px;
		padding-right: 25px;
	}
}
#container {
	height: 1000px;
}
.address {
	position: relative;
	height: 99vh;
	overflow: hidden;
	.cinemaMap {
		position: absolute;
		bottom: 20px;
		.swiper-container {
			width: 680px;
			margin: 0 auto;
			.swiper-slide {
				height: 388px;
				width: 406px;
				bottom: 20px;
				img {
					height: 261px;
					width: 404px;
				}
				div.detailMsg {
					display: flex;
					width: 404px;
					height: 127px;
					.msg {
						color: #ffffff;
						width: 260px;
						p {
							width: 700px;
							height: 33px;
							font-size: 24px;
							margin-bottom: 20px;
						}
						.van-icon {
							margin-right: 20px;
							font-size: 15px;
						}
						span {
							margin-left: 60px;
						}
					}
					.button {
						height: 50px;
						width: 90px;
						line-height: 50px;
						margin: 30px;
						text-align: center;
						font-size: 24px;
						color: #ffffff;
						background-image: linear-gradient(150deg, #f25b86 0%, #f1ac5e 100%);
						box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
						border-radius: 12px;
						border-radius: 12px;
					}
				}
			}
		}
	}
}
</style>
